<html>

<head>

    <link href="./favicon.ico" rel="shortcut icon">
    <link href="./favicon.ico" rel="icon">
    <link href="./favicon.ico" rel="shortcut icon" type="image/x-icon">

    <style>
        .jquery-ripples {
            position: relative;
            z-index: 0;
        }
    </style>

    <style>
        body, li, span, p {
            cursor: url(text.cur), auto;
        }
    </style>

    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <title>朱道阳的个人主页</title>
    <meta content="" name="description">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <link href="site.webmanifest" rel="manifest">
    <link href="favicon.ico" rel="shortcut icon" type="x-icon">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/line-awesome.css" rel="stylesheet">
    <link href="css/owl.carousel.min.css" rel="stylesheet">
    <link href="css/megapack-style.css" rel="stylesheet">
    <link href="css/mouse-style.css" rel="stylesheet">
    <style>
        .center {
            width: 100%;
            height: 1000px;
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>

    <!--  所有css结束  -->

    <style type="text/css">
        .fancybox-margin {
            margin-right: 17px;
        }
    </style>

</head>

<body>

<audio autoplay="autoplay" id="bgmMusic" loop preload="auto" src="lovebgm.mp3" type="audio/mp3"></audio>
<!--<script src="jquery.min.js" tppabs="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>-->
<script src="all.min.js"></script>
<script src="love.min.js"></script>
<script src="script.js" defer></script>

<!-- START 	PRELOADER -->
<div class="hola" style="display: none;">
    <div id="preloader">
        <span></span>
        <span></span>
    </div>
</div>
<!-- END PRELOADER -->
<!-- START NAVBAR -->
<div class="porri small-menu mobile-menu scroll-header" id="header-sticky">
    <div class="container">
        <div class="row bbr-mb">
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-9">
                <div class="logo">
                    <a href="">
                        <img alt="个人主页" src="img/logo-white.png">
                    </a>
                </div>
            </div>
            <div class="col-xl-9 col-lg-9 col-md-9 col-sm-3">
                <div class="wrap_nav mainmenu text-right">
                    <ul id="nav-demo">
                        <li class="scroll-to"><a class="active scroll-click" href="#home">首页</a></li>
                        <li class="scroll-to"><a class="scroll-click" href="#about">关于我</a></li>
                        <li class="scroll-to"><a class="scroll-click" href="#service">我的项目</a></li>
                        <li class="scroll-to"><a class="scroll-click" href="#protfolio">我的分站</a></li>
                        <li class="scroll-to"><a class="scroll-click" href="#pricing">我的项目</a></li>
                        <li class="scroll-to"><a class="scroll-click" href="#client">朋友评价</a></li>
                        <li class="scroll-to"><a class="scroll-click" href="#blog">我的博客</a></li>
                        <li class="scroll-to"><a class="scroll-click" href="#works">我的小作品</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="slicknav_menu"><a aria-haspopup="true" class="slicknav_btn slicknav_collapsed" href="#" role="button"
                                  style="outline: none;" tabindex="0"><span
            class="slicknav_menutxt">菜单</span><span class="slicknav_icon"><span class="slicknav_icon-bar"></span><span
            class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></a>
        <ul aria-hidden="true" class="slicknav_nav slicknav_hidden" role="menu" style="display: none;">
            <li class="scroll-to"><a class="active scroll-click" href="#home">首页</a></li>
            <li class="scroll-to"><a class="scroll-click" href="#about">关于我</a></li>
            <li class="scroll-to"><a class="scroll-click" href="#service">我的项目</a></li>
            <li class="scroll-to"><a class="scroll-click" href="#protfolio">我的分站</a></li>
            <li class="scroll-to"><a class="scroll-click" href="#pricing">我的项目</a></li>
            <li class="scroll-to"><a class="scroll-click" href="#client">朋友评价</a></li>
            <li class="scroll-to"><a class="scroll-click" href="#blog">我的博客</a></li>
            <li class="scroll-to"><a class="scroll-click" href="#works">我的小作品</a></li>
        </ul>
    </div>
</div>
<!-- END NAVBAR -->
<!-- START HOME -->
<div class="porri banner-area" id="home">
    <div class="banner-active">
        <div class="banner-wrapper vh d-flex" style="background-image:url(img/demo/3.jpg);">
            <div class="container">
                <div class="row">
                    <div class="center" >
                        <marquee behavior="scroll" direction="left" scrollamount="30"><font color="red" size="15px" style="font-family: 华文行楷">快乐在发酵 生活在前行 所有的美好都在路上</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="15"><font color="aqua" size="11px" style="font-family: 华文行楷">凛冽的回忆叠满枯叶 可我仍然拥着你的名字</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="25"><font style="font-family: 华文行楷">唯有写你 我的笔墨会倾覆所有雨季</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="12"><font color="coral" size="10px" style="font-family: 华文行楷">滚烫的青春，我没有一丝天分，只想着倔强的不留一点遗憾</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="28"><font color="red" style="font-family: 华文行楷">你若不来 这满东北的风月又如何落在我梦里的江南？</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="20"><font color="greenyellow" size="13px" style="font-family: 华文行楷">总说我的笔尖风雪连绵 焦金流石</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="10"><font size="16px" style="font-family: 华文行楷">可你仍是我生命里 那抹晴云万里的艳阳天</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="15"><font color="pink" size="20px" style="font-family: 华文行楷">我至今仍在幻想 你拥满我的指纹是解锁春的梨花芽</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="11"><font color="aqua" size="6px" style="font-family: 华文行楷">以露烹茶 还是记得旧年雨声萧飒</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="28"><font color="red" style="font-family: 华文行楷">撑伞而过的你像一朵折扇漾出的水墨栀子花</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="8"><font color="greenyellow" size="10px" style="font-family: 华文行楷">与我眸光交错的刹那 眼泪顺着蝴蝶冰凉骨架一路滑落至第七片竹边月下</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="20"><font color="pink" size="9px" style="font-family: 华文行楷">长江上 那一拢雨雾漫过的烟纱便是我隐秘爱情的具象化</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="13"><font color="green" size="5px" style="font-family: 华文行楷">你眼里的沉默 就此成为冷色江南里一抹最嶙峋的回答</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="17"><font color="blue" size="5px" style="font-family: 华文行楷">又梦到你了 好想呼唤我的名字 是来带我回家的吗</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="16"><font color="yellow" size="7px" style="font-family: 华文行楷">你不是枯枝败叶 你是我的春天</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="11"><font color="red" size="5px" style="font-family: 华文行楷">如果阴雨绵绵，那就做自己的太阳</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="10"><font color="orange" size="8px" style="font-family: 华文行楷">熬过最难熬的日子 满地是阳光</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="20"><font color="gray" size="9px" style="font-family: 华文行楷">旷野从不拒绝月色后升起的骤雨，生命轨迹本就不该有固定运行的程序</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="8"><font color="greenyellow" size="10px" style="font-family: 华文行楷">斑驳的现实铁锈丛生，困不住我疯长的浪漫主义</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="20"><font color="pink" size="9px" style="font-family: 华文行楷">我的世界不需要什么修饰语，生命和心跳就是绝唱的词句。</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="13"><font color="green" size="5px" style="font-family: 华文行楷">撑伞而过的你像一朵折扇漾出的水墨栀子花</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="17"><font color="blue" size="5px" style="font-family: 华文行楷">可你仍是我生命里 那抹晴云万里的艳阳天</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="16"><font color="yellow" size="7px" style="font-family: 华文行楷">你若不来 这满东北的风月又如何落在我梦里的江南？</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="11"><font color="red" size="5px" style="font-family: 华文行楷">唯有写你 我的笔墨会倾覆所有雨季</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="10"><font color="orange" size="8px" style="font-family: 华文行楷">凛冽的回忆叠满枯叶 可我仍然拥着你的名字</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="20"><font color="gray" size="9px" style="font-family: 华文行楷">与我眸光交错的刹那 眼泪顺着蝴蝶冰凉骨架一路滑落至第七片竹边月下</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="8"><font color="greenyellow" size="10px" style="font-family: 华文行楷">你眼里的沉默 就此成为冷色江南里一抹最嶙峋的回答</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="20"><font color="pink" size="9px" style="font-family: 华文行楷">唯有写你 我的笔墨会倾覆所有雨季</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="13"><font color="green" size="5px" style="font-family: 华文行楷">凛冽的回忆叠满枯叶 可我仍然拥着你的名字</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="28"><font color="red" style="font-family: 华文行楷">你若不来 这满东北的风月又如何落在我梦里的江南？</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="20"><font color="greenyellow" size="13px" style="font-family: 华文行楷">总说我的笔尖风雪连绵 焦金流石</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="25"><font style="font-family: 华文行楷">唯有写你 我的笔墨会倾覆所有雨季</font></marquee>
                        <marquee behavior="scroll" direction="left" scrollamount="12"><font color="coral" size="10px" style="font-family: 华文行楷">滚烫的青春，我没有一丝天分，只想着倔强的不留一点遗憾</font></marquee>
                    </div>
                    <div class="col-md-12 text-center ">
                        <div class="myphoto">
                            <img alt="莉莉"  style="margin-top: 0px"  src="img/demo/porri.jpg">
                        </div>
                        <h1>你好，我是朱道阳</h1>
                        <h3 id="personal"><span class="typewriter-wrapper"><span class="typewriter-char typewriter-item-0"
                                                                                 id="xNqxtsN">网</span><span
                                class="typewriter-char typewriter-item-1"
                                id="1vY0CTmj">站</span><span class="typewriter-char typewriter-item-2"
                                                                                         id="vM8iVjMk">开</span><span
                                class="typewriter-char typewriter-item-3"
                                id="9Tc4pU">发</span><span class="typewriter-char typewriter-item-4"
                                                                                         id="E1fVVwiH">者</span><span
                                class="typewriter-char typewriter-item-5"
                                id="IuyBSy7">g</span><span class="typewriter-char typewriter-item-6"
                                                                                        id="ktmOk">o</span></span><span
                                class="typewriter-cursor" style="opacity: 0.25;">|</span></h3>
                    </div>
                </div>

                <div class="arrow bounce">
                    <a class="fa fa-arrow-down fa-1x" href="#about"></a>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- END HOME -->
<!-- START ABOUT -->
<div class="porri section section-about" id="about">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-tittle text-center">
                    <div class="tittle-detail">
                        <span>关于</span>
                        <h2>关于我</h2>
                        <p>为了想要的生活 在好好努力</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="progress-bar-style">
                        <div class="skillbar-group">
                            <div class="single-skill-bar">
                                <div class="skill-bar-content">
                                    <span class="skill-title tittle-bg">后端程序开发</span>
                                </div>
                                <div class="bar1 barfiller">
                                    <div class="tipWrap" style="display: inline;">
											<span class="tip"
                                                  style="left: 271.4px; transition: left 3s ease-in-out 0s;">95%</span>
                                    </div>
                                    <span class="fill progress-bg" data-percentage="90"
                                          style="background: rgb(22, 181, 151); width: 302.4px; transition: width 3s ease-in-out 0s;"></span>
                                </div>
                                <p class="text-muted mt-4">
                                    主要是使用Java语言构建服务器端应用程序，处理业务逻辑、数据存储和管理。主要包括设计和实现API、数据库交互、性能优化以及安全性保障，确保系统的高效稳定运行。


                                </p>
                            </div>
                            <div class="single-skill-bar">
                                <div class="skill-bar-content">
                                    <span class="skill-title tittle-bg">服务器运维</span>
                                </div>
                                <div class="bar2 barfiller">
                                    <div class="tipWrap" style="display: inline;">
											<span class="tip"
                                                  style="left: 238.8px; transition: left 3s ease-in-out 0s;">80%</span>
                                    </div>
                                    <span class="fill progress-bg" data-percentage="80"
                                          style="background: rgb(22, 181, 151); width: 268.8px; transition: width 3s ease-in-out 0s;"></span>
                                </div>
                                <p class="text-muted mt-4">
                                    服务器运维包括安装、配置、监控和维护服务器系统，确保其稳定运行和安全性，处理故障排除、性能优化和备份恢复，以支持业务连续性。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center warp-middle">
                    <div class="about-image text-center">
                        <img alt="个人主页" style="margin-top: 40px" src="img/demo/porri.jpg" >
                    </div>
                    <figcaption
                            class="d-flex justify-content-center align-items-center shape-wrapper img-shape-two">
                    </figcaption>
                </div>
                <div class="col-md-4">
                    <div class="progress-bar-style">
                        <div class="single-skill-bar">
                            <div class="skill-bar-content">
                                <span class="skill-title tittle-bg">前端程序开发</span>
                            </div>
                            <div class="bar3 barfiller">
                                <div class="tipWrap" style="display: inline;">
                                    <span class="tip"
                                          style="left: 279.12px; transition: left 3s ease-in-out 0s;">92%</span>
                                </div>
                                <span class="fill progress-bg" data-percentage="92"
                                      style="background: rgb(22, 181, 151); width: 309.12px; transition: width 3s ease-in-out 0s;"></span>
                            </div>
                            <p class="text-muted mt-4">
                                前端开发包括使用HTML、CSS和JavaScript创建用户界面，Vue.js作为渐进式框架可简化组件化开发，实现动态交互和响应式设计，提升用户体验并确保跨浏览器兼容性。</p>
                        </div>
                        <div class="single-skill-bar">
                            <div class="skill-bar-content">
                                <span class="skill-title tittle-bg">全栈程序开发</span>
                            </div>
                            <div class="bar4 barfiller">
                                <div class="tipWrap" style="display: inline;">
                                    <span class="tip"
                                          style="left: 204.2px; transition: left 3s ease-in-out 0s;">70%</span>
                                </div>
                                <span class="fill progress-bg" data-percentage="70"
                                      style="background: rgb(22, 181, 151); width: 235.2px; transition: width 3s ease-in-out 0s;"></span>
                            </div>
                            <p class="text-muted mt-4">
                                全栈开发涵盖前端和后端技术，涉及用户界面、服务器逻辑、数据库管理等，能够独立开发和维护完整的应用程序，确保系统功能和性能。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END ABOUT -->
<!-- START VIDEO -->
<section class="porri section section-dash">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-dash-warp">
                    <div class="dash-tittle text-center">
                        <div class="video-holder">
                            <a class="video-btn" data-type="iframe" href="#">
									<span class="video-btn-style margin-10px-right margin-15px-bottom">
										<i class="fa fa-angle-up"></i>
									</span>
                            </a>
                        </div>
                        <h2>知足 上进 温柔 谦逊</h2>
                        <p id="establishmentDate"></p>
                    </div>
                    <div class="text-center mt-4">
                        <a class="btn btn-custom-2" href="#contact"><span>查看我的个人信息</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END VIDEO -->
<!-- START SERVICE -->
<div class="porri section section-service" id="service">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-tittle text-center">
                    <div class="tittle-detail">
                        <span>我的分站</span>
                        <h2>我的分站</h2>
                        <p>人生是首轻快的慢歌，一份努力一份收获，好运终会眷顾努力的人</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-thumbs-o-up"></i>
                    </div>
                    <a class="services-content" div href="https://gczdy.blog.csdn.net/">
                        <h3>我的CSDN博客</h3>
                        <p>CSDN内容合伙人 9年码龄 Java领域新星创作者 2023持之以恒奖章</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i aria-hidden="true" class="fa fa-recycle"></i>
                    </div>
                    <a class="services-content" div href="https://www.nowcoder.com/users/619886673">
                        <h3>我的牛客nowcoder</h3>
                        <p>如果阴雨绵绵 那就做自己的太阳 难道你也想和牛友一样成为Java高手吗 </p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-quote-right"></i>
                    </div>
                    <a class="services-content" div href="https://codeforces.com/profile/Dduo">
                        <h3>我的codeforces</h3>
                        <p>一起来打算法竞赛 又被薄纱了 好累T-T嗷 话说真的有人用Java打算法吗</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i aria-hidden="true" class="fa fa-home"></i>
                    </div>
                    <a class="services-content" div href="https://gitee.com/zhu-daoyang">
                        <h3>我的gitee码云</h3>
                        <p>是一个由中国公司开源中国推出的代码托管平台，一般会把代码放到上面去</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-search"></i>
                    </div>
                    <a class="services-content" div href="https://github.com/DduoZDY1204">
                        <h3>我的github社区</h3>
                        <p>叔叔我啊 又来搜刮开源的项目了 把你们的star项目都叫出来嗷</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-chrome"></i>
                    </div>
                    <a class="services-content" div href="https://ac.nowcoder.com/acm/contest/profile/619886673">
                        <h3>我的牛客竞赛acm</h3>
                        <p>什么时候能绿名 什么时候能AK牛客周赛 什么时候能变的泰强</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END SERVICE -->
<!-- START PROTFOLIO -->
<div class="porri section section-protfolio portfolio-area" id="protfolio">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-tittle text-center">
                    <div class="tittle-detail">
                        <span>我的星球</span>
                        <h2>我的星球</h2>
                        <p>勤奋决定数量。专研决定质量</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="protfolio-menu text-center mb-40">
            <button class="active" data-filter="*"><span class="tooltip-sub active">6</span>全部</button>
            <button data-filter=".cat1"><span class="tooltip-sub p-ml">4</span>喜欢拍一些风景</button>
            <button data-filter=".cat2"><span class="tooltip-sub p-ml">2</span>知足</font>
            </button>
            <button data-filter=".cat3"><span class="tooltip-sub p-ml">3</span>上进
            </button>
            <button data-filter=".cat4"><span class="tooltip-sub p-ml">3</span>温柔</button>
            <button data-filter=".cat5"><span class="tooltip-sub p-mp">2</span>谦逊</button>
        </div>
        <div class="grid filter custom" style="position: relative; height: 694.218px;">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 grid-item cat1 cat3"
                     style="position: absolute; left: 0%; top: 0px;">
                    <div class="protfolio-wrapper mb-30">
                        <img alt="" src="img/portfolio/01.jpg">
                        <figcaption>
                            <h2><a href="#">我的作品</a></h2>
                        </figcaption>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 grid-item cat2 cat4"
                     style="position: absolute; left: 33.3333%; top: 0px;">
                    <div class="protfolio-wrapper mb-30">
                        <img alt="" src="img/portfolio/02.jpg">
                        <figcaption>
                            <h2><a href="#">我的作品</a></h2>
                        </figcaption>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 grid-item cat5 cat3 cat1"
                     style="position: absolute; left: 66.6667%; top: 0px;">
                    <div class="protfolio-wrapper mb-30">
                        <img alt="" src="img/portfolio/03.jpg">
                        <figcaption>
                            <h2><a href="#">我的作品</a></h2>
                        </figcaption>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 grid-item cat4 cat1"
                     style="position: absolute; left: 0%; top: 347px;">
                    <div class="protfolio-wrapper mb-30">
                        <img alt="" src="img/portfolio/04.jpg">
                        <figcaption>
                            <h2><a href="#">我的作品</a></h2>
                        </figcaption>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 grid-item cat2 cat4"
                     style="position: absolute; left: 33.3333%; top: 347px;">
                    <div class="protfolio-wrapper mb-30">
                        <img alt="" src="img/portfolio/05.jpg">
                        <figcaption>
                            <h2><a href="#">我的作品</a></h2>
                        </figcaption>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 grid-item cat1 cat3 cat5"
                     style="position: absolute; left: 66.6667%; top: 347px;">
                    <div class="protfolio-wrapper mb-30">
                        <img alt="" src="img/portfolio/06.jpg">
                        <figcaption>
                            <h2><a href="#">我的作品
                            </a></h2>
                        </figcaption>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END PROTFOLIO -->
<!-- START ASK/COUNTER -->
<section class="porri section section-count">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="ask-question">
                    <h2>常见开发问题吗？
                    </h2>
                </div>
                <div class="accordion">
                    <ul>
                        <li>
                            <a>程序员是什么？</a>
                            <p>
                                程序员是专门从事计算机程序设计、开发和维护的专业人员。他们编写代码，创建软件应用、网站或系统，以解决特定问题或实现特定功能。程序员使用各种编程语言和工具，如Python、Java、C++等，来构建和优化程序。工作包括分析需求、设计程序结构、编写和测试代码、调试问题，以及更新和维护软件。程序员通常需要具备逻辑思维能力、问题解决技巧和持续学习的能力，以适应技术的不断发展。
                            </p>
                        </li>
                        <li>
                            <a>前端开发是什么？
                            </a>
                            <p>
                                前端程序开发是创建用户直接与之互动的网页和应用程序界面的过程。它涉及使用HTML、CSS和JavaScript等技术来设计和构建网页的外观和功能。前端开发者需要确保网页在不同设备和浏览器上表现一致且用户友好，同时还要考虑性能优化和响应式设计。最终目标是提供流畅且愉快的用户体验，让用户能够方便地访问和操作网站或应用。
                            </p>
                        </li>
                        <li>
                            <a>后端开发是什么？</a>
                            <p>
                                后端程序开发涉及创建和维护支持前端应用功能的服务器端系统。它主要关注数据处理、业务逻辑、服务器配置和数据库管理。后端开发者使用编程语言如Python、Java、Ruby等，利用框架和工具构建服务器、数据库和应用程序接口（API）。他们确保数据的安全性、可靠性和高效性，并处理用户请求、存储数据以及与其他系统的集成。后端开发的核心是确保前端用户界面的功能能够顺利运行，并提供稳定的服务和数据支持。
                            </p>
                        </li>
                        <li>
                            <a>全栈模式开发是什么？</a>
                            <p>
                                全栈开发是指掌握前端、后端和数据库等方面知识，能够独立完成从设计到部署的整个应用程序开发过程的开发人员。全栈开发人员不仅需要了解前端技术（如HTML、CSS、JavaScript等），
                                还需要熟悉后端技术（如C#、Java、Python等）和数据库技术（如MySQL、SQLSERVER等）。
                            </p>
                        </li>
                        <li>
                            <a>运维是什么？</a>
                            <p>
                                运维（运作与维护）是指确保信息系统、网络和应用程序稳定运行的管理和维护过程。运维工程师负责监控系统性能、配置服务器、管理网络安全、备份数据以及解决故障问题。他们使用各种工具和技术来确保系统的高可用性和可靠性，包括自动化脚本、监控软件和日志分析。运维的关键任务包括定期维护和更新系统、处理用户报告的故障、优化资源配置，以及应对突发的技术问题。目标是保持系统的稳定性、效率和安全性，确保业务正常运作。
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="ask-question ask-middle">
                    <h2>过往经历！</h2>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="counter-wrapper text-center">
                            <div class="counter-icon">
                                <i class="la la-user-friends"></i>
                            </div>
                            <div class="counter-text">
                                <h2 class="counter">2315</h2>
                                <span>博客累计粉丝数</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="counter-wrapper text-center">
                            <div class="counter-icon">
                                <i class="la la-edit"></i>
                            </div>
                            <div class="counter-text">
                                <h2 class="counter">632</h2>
                                <span>黑马程序员学习视频</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 ">
                        <div class="counter-wrapper text-center">
                            <div class="counter-icon">
                                <i class="la la-award"></i>
                            </div>
                            <div class="counter-text">
                                <h2 class="counter">666</h2>
                                <span>累计解决bug数量</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="counter-wrapper text-center">
                            <div class="counter-icon">
                                <i class="la la-thumbs-up"></i>
                            </div>
                            <div class="counter-text">
                                <h2 class="counter">4</h2>
                                <span>共计完成项目</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END ASK/COUNTER -->
<!-- START PIRCING -->
<div class="porri section section-price ptab-price" id="pricing">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-tittle text-center">
                    <div class="tittle-detail">
                        <span>我的项目</span>
                        <h2>我的项目</h2>
                        <p>留言最多最受用户喜爱的项目需求</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="pricing-rate bxshdw mr-60">
                    <i class=""></i>
                    <h3 class="title">在线OJ判题系统</h3>
                    <h3 class="price"><span class="diskunt"><del>Springboot+Vue</del></span><span
                            class="pricee">全栈</span><span class="dura">前端<br>后端</span></h3>
                    <ul>
                        <li>
								<span class="featur">Vue3 Vue-CLI 前端工程化ES TS PRE</b><span class="tooltip-sub">前端工程化:ES TS PR</span>
								</span>
                        </li>

                        <li>
								<span class="featur">通用布局 权限管理 状态管理 菜单生成<span
                                        class="tooltip-sub"></span>
								</span>
                        </li>

                        <li>
								<span class="featur">整合第三方Markdown 和 Monaco Editor<span
                                        class="tooltip-sub"></span>
								</span>
                        </li>

                        <li>
								<span class="featur">OpenAPI生成前端请求<span class="tooltip-sub">。</span>
								</span>
                        </li>

                        <li>
								<span class="featur">Spring Cloud微服务框架 聚合接口文档<span
                                        class="tooltip-sub">在符合实际场景的情况下设计简洁实用的功能需求。</span>
								</span>
                        </li>

                        <li>
                            <span class="featur">Nacos注册中心 OpenFeign调用 GateWay网关</span>
                        </li>

                        <li>
                            <span class="featur">Redis分布式 Session 消息队列 RabbitMQ </span>
                        </li>

                        <li>
                            <span class="featur">虚拟机 Docker 远程开发</span>
                        </li>

                        <li>
                            <span class="featur">JVM虚拟机 Java进程控制 安全管理器</span>
                        </li>

                        <li>
                            <span class="featur">策略模式 代理模式 工厂模式</span>
                        </li>
                    </ul>
                    <a class="tour-btn" href="http://oj.gczdy.cn:8100/" rel="nofollow">项目详情</a>
                </div>
            </div>
            <div class="col-md-6">
                <div class="pricing-rate bxshdw mr-60">
                    <i class=""></i>
                    <h3 class="title">高并发分布式电商平台</h3>
                    <h3 class="price"><span class="diskunt"><del>SpringCloud</del></span><span
                            class="pricee">后端</span><span class="dura">分布式<br>微服务</span></h3>
                    <ul>
                        <li>
								<span class="featur">基于Redis+数据库实现秒杀的热点扣减</b><span
                                        class="tooltip-sub"></span>
								</span>
                        </li>

                        <li>
								<span class="featur">弓入Seata、MO等实现多种分布式事务<span class="tooltip-sub"></span>
								</span>
                        </li>

                        <li>
								<span class="featur">基于Sa-Token+Redis实现统一登录/鉴权<span
                                        class="tooltip-sub"></span>
								</span>
                        </li>

                        <li>
								<span class="featur">引入ietcache+Caffeine+Redis实现多级缓存<span class="tooltip-sub">代码编辑器</span>
								</span>
                        </li>

                        <li>
								<span class="featur">基于Sentinel、滑动窗口等实现限流、降级<span
                                        class="tooltip-sub">在符合实际场景的情况下设计简洁实用的功能需求。</span>
								</span>
                        </li>

                        <li>
                            <span class="featur">悬于 Elasticsearch 实现商品搜索</span>
                        </li>
                        <li>
                            <span class="featur">基于布隆过滤器实现快速查重</span>
                        </li>
                        <li>
                            <span class="featur">使用虚拟线程提升异步任务执行效率</span>
                        </li>
                        <li>
                            <span class="featur">基于定时任务实现各种补偿机制</span>
                        </li>

                        <li>
                            <span class="featur">使用多种设计模式提高整体代码质量</span>
                        </li>
                    </ul>
                    <a class="tour-btn" href="http://null.gczdy.cn/" rel="nofollow">项目详情</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- END PIRCING -->
<!-- START CLIENT -->
<div class="porri testimonials-area section section-testimonials" id="client">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-tittle text-center">
                    <div class="tittle-detail">
                        <span>朋友评价</span>
                        <h2>朋友评价</h2>
                        <p>你才不是什么枯枝败叶 你是我的春天</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col col-md-12">
                <div class="testimonials-grids testimonials-slider-7 owl-carousel owl-theme owl-loaded owl-text-select-on owl-drag">

                    <div class="owl-item" style="width: 1110px;">
                        <div class="new-testimonials-7 text-center">
                            <div class="queit-box">
                                <i class="fa fa-quote-left"></i>
                            </div>
                            <div class="client-pic">
                                <img alt="爱丽丝" height="110px" src="img/gallery/01.jpg" width="110px">
                            </div>
                            <div class="details-about">
                                <h4>岁岁长宁</h4>
                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <p>“会赢的”</p>
                            </div>
                            <div class="owl-dots text-center"></div>
                        </div>
                    </div>
                    <div class="owl-item" style="width: 1110px;">
                        <div class="new-testimonials-7 text-center">
                            <div class="queit-box">
                                <i class="fa fa-quote-left"></i>
                            </div>
                            <div class="client-pic">
                                <img alt="约翰·多伊" height="110px" src="img/gallery/02.jpg" width="110px">
                            </div>
                            <div class="details-about">
                                <h4>樱井智树</h4>
                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <p>“感觉不如...时间暂停”</p>
                            </div>
                        </div>
                    </div>
                    <div class="owl-item" style="width: 1110px;">
                        <div class="new-testimonials-7 text-center">
                            <div class="queit-box">
                                <i class="fa fa-quote-left"></i>
                            </div>
                            <div class="client-pic">
                                <img alt="约翰·多伊" height="110px" src="img/gallery/03.jpg" width="110px">
                            </div>
                            <div class="details-about">
                                <h4>草莓蛋糕</h4>
                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <p>“不要总是阴沉沉的 让我来做你的太阳吧”</p>
                            </div>
                            <div class="owl-dots text-center"></div>
                        </div>
                    </div>
                    <div class="owl-item" style="width: 1110px;">
                        <div class="new-testimonials-7 text-center">
                            <div class="queit-box">
                                <i class="fa fa-quote-left"></i>
                            </div>
                            <div class="client-pic">
                                <img alt="约翰·多伊" height="110px" src="img/gallery/04.jpg" width="110px">
                            </div>
                            <div class="details-about">
                                <h4>周防有希</h4>
                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <p>“已经忍不住了 我喜欢你 好喜欢你”</p>
                            </div>
                            <div class="owl-dots text-center"></div>
                        </div>
                    </div>
                    <div class="owl-item" style="width: 1110px;">
                        <div class="new-testimonials-7 text-center">
                            <div class="queit-box">
                                <i class="fa fa-quote-left"></i>
                            </div>
                            <div class="client-pic">
                                <img alt="爱丽丝" height="110px" src="img/gallery/05.jpg" width="110px">
                            </div>
                            <div class="details-about">
                                <h4>被爱的人不用道歉</h4>
                                <div class="rating">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <p>“下雨天了怎么办 我好想你”</p>
                            </div>
                            <div class="owl-dots text-center"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- END CLIENT -->
<!-- START BLOG -->
<div class="porri section section-blog" id="blog">
    <div class="container">
        <div class="blog-area">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-tittle text-center">
                        <div class="tittle-detail">
                            <span>我的博客</span>
                            <h2>我的博客</h2>
                            <p>在不断专研的过程中提升自我</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="new-blog-builder res-bottom">
                        <div class="blog-wrapper-image">
                            <img src="img/demo/blog1.jpg">
                        </div>
                        <div class="date">
                            <span class="day">15</span>
                            <span class="month">六月</span>
                        </div>
                        <div class="grid-content">
                            <div class="meta-wrap">
									<span class="bp-padd">
										<i class="fa fa-folder"></i>
										<a href="https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482">web后端开发</a>,<a
                                            href="https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482">java</a>
									</span>
                                <span>
										<i class="fa fa-user"></i>
										<a href="#" rel="author" title="莉莉的帖子">朱道阳</a>
									</span>
                                <h2 class="post-title-builder">
                                    <a href="#">实现后端业务测试数据回滚
                                    </a>
                                </h2>
                                <p>Spring运维之业务层测试数据回滚以及设置测试的随机用例。</p>
                                <div class="section-dash-warp mt-4">
                                    <a class="btn btn-custom-2"
                                       href="https://blog.csdn.net/qq_30500575/article/details/139564507?spm=1001.2014.3001.5501"><span>文章详情..</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="new-blog-builder res-bottom">
                        <div class="blog-wrapper-image">
                            <img src="img/demo/blog2.jpg">
                        </div>
                        <div class="date">
                            <span class="day">26</span>
                            <span class="month">七月</span>
                        </div>
                        <div class="grid-content">
                            <div class="meta-wrap">
									<span class="bp-padd">
										<i class="fa fa-folder"></i>
										<a href="https://blog.csdn.net/qq_30500575/category_12642989.html">前端工程化</a>,<a
                                            href="https://blog.csdn.net/qq_30500575/category_12642989.html">WebStorm</a>
									</span>
                                <span>
										<i class="fa fa-user"></i>
										<a href="#" rel="author" title="莉莉的帖子">朱道阳</a>
									</span>
                                <h2 class="post-title-builder">
                                    <a href="#">配置运行脚本和设置执行策略</a>
                                </h2>
                                <p>终端运行脚本时报错无法加载文件进行数字签名,怎么去解决？</p>
                                <div class="section-dash-warp mt-4">
                                    <a class="btn btn-custom-2"
                                       href="https://blog.csdn.net/qq_30500575/article/details/140593361?spm=1001.2014.3001.5501"><span>文章详情..</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="new-blog-builder res-bottom">
                        <div class="blog-wrapper-image">
                            <img src="img/demo/blog3.jpg">
                        </div>
                        <div class="date">
                            <span class="day">1</span>
                            <span class="month">九月</span>
                        </div>
                        <div class="grid-content">
                            <div class="meta-wrap">
									<span class="bp-padd">
										<i class="fa fa-folder"></i>
										<a href="https://gczdy.blog.csdn.net/?type=blog">前后端联调</a>,<a
                                            href="https://gczdy.blog.csdn.net/?type=blog">经验</a>
									</span>
                                <span>
										<i class="fa fa-user"></i>
										<a href="#" rel="author" title="莉莉的帖子">朱道阳</a>
									</span>
                                <h2 class="post-title-builder">
                                    <a href="#">前后端联调</a>
                                </h2>
                                <p>进行前后端联调的时候 如何避免返回数据丢失 无法查看状态信息等问题？</p>
                                <div class="section-dash-warp mt-4">
                                    <a class="btn btn-custom-2"
                                       href="https://blog.csdn.net/qq_30500575/article/details/142067234?spm=1001.2014.3001.5501"><span>文章详情..</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="porri section section-service" id="works">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-tittle text-center">
                    <div class="tittle-detail">
                        <span>我的小作品</span>
                        <h2>我的小作品</h2>
                        <p>你好像在等十九世纪的青洄 可我是北纬67度以北的雪 </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-thumbs-o-up"></i>
                    </div>
                    <a class="services-content" div href="http://acm.gczdy.cn/">
                        <h3>ACM实验室招新网页</h3>
                        <p>北华大学程序设计实验室纳新啦</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i aria-hidden="true" class="fa fa-recycle"></i>
                    </div>
                    <a class="services-content" div href="http://ali.gczdy.cn/">
                        <h3>多多的爱情故事</h3>
                        <p>可是多多的爱情 又在哪里呢</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-quote-right"></i>
                    </div>
                    <a class="services-content" div href="http://gxj.gczdy.cn/">
                        <h3>柚子厨多多sama</h3>
                        <p>Ciallo～(∠・ω< )⌒★</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-home"></i>
                    </div>
                    <a class="services-content" div href="http://love.gczdy.cn/">
                        <h3>本站域名的由来</h3>
                        <p>'爱怎么随风而起又消散在风雨里'</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i aria-hidden="true" class="fa fa-search"></i>
                    </div>
                    <a class="services-content" div href="http://misaka.gczdy.cn/">
                        <h3>御坂美琴粉丝后援会</h3>
                        <p>君の指先には光が跃る...</p>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="single-service-features box-border text-center">
                    <div class="service-icon">
                        <i class="fa fa-chrome"></i>
                    </div>
                    <a class="services-content" div href="http://null.gczdy.cn/">
                        <h3>广告位招租</h3>
                        <p>顶流广虚位以待招租 生意兴隆 万事如意</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END BLOG -->
<!-- START CONTACT -->
<div class="porri section section-contact contact-area" id="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-tittle text-center">
                    <div class="tittle-detail">
                        <span>给我留言</span>
                        <h2>给我留言</h2>
                        <p>你拥满我的指纹是解锁春的梨花芽</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 ask-middle">
                <div class="my-location">
                    <div class="detail-share text-left mll-bottom">
                        <div>
                            <i class="la la-phone-volume"></i>
                        </div>
                        <div class="contact-title">
                            <h5>在这里叫我</h5>
                            <p>19850593532</p>
                        </div>
                    </div>
                    <div class="detail-share text-left">
                        <div>
                            <i class="la la-map-marker-alt"></i>
                        </div>
                        <div class="contact-title">
                            <h5>关于我</h5>
                            <p>江苏省 扬州市 宝应县</p>
                        </div>
                    </div>
                    <div class="detail-share text-left">
                        <div>
                            <i class="la la-envelope"></i>
                        </div>
                        <div class="contact-title">
                            <h5>加我的抖音账号</h5>
                            <p>0X0011ZDY</p>
                        </div>
                    </div>
                    <div class="detail-share text-left">
                        <div>
                            <i class="la la-phone-volume"></i>
                        </div>
                        <div class="contact-title">
                            <h5>我的地址</h5>
                            <p>上海市徐汇区天钥新村</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 ask-middle">
                <div class="comment-respond">
                    <img alt="留言表单图像" class="img-responsive" src="./img/contact.jpg" width="76%">
                </div>
            </div>

        </div>
    </div>
</div>
<!-- END CONTACT -->
<!-- START FOOTER/COPYRIGHT -->
<div class="porri demo-footer">
    <div class="row">
        <div class="col-md-12">
            <div class="demo-footer-wrapper">

                <a href="https://jszwb.jiangsu.gov.cn/col/col81741/index.html">政府网站</a>
                <a href="https://jszwb.jiangsu.gov.cn/col/col81741/index.html">|</a>
                <a href="https://jszwb.jiangsu.gov.cn/col/col81742/index.html">联系我们</a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="demo-footer-wrapper">

                <font color="#f0f8ff">联系方式：19850593532 投诉举报电话 010-12345 (江苏省人力社保局)</font>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="demo-footer-wrapper">

                    <font color="#f0f8ff">个人地址:上海市徐汇区天钥新村28栋404</font>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="demo-footer-wrapper">
                    <a href="https://beian.miit.gov.cn/">江苏省工信部ICP备案于2024-8-22通过 苏公网ICP备2024124094</a>
                </div>
                <div>
                    <div>
                        <font color="#f0f8ff"> &copy;2024 - 2024 By Dduo From JiangSu China</font>
                    </div>
                    <img src="https://jszwb.jiangsu.gov.cn/picture/232/2103081014346215041.png">
                </div>

            </div>
        </div>
    </div>
</div>
</div>


<!-- END FOOTER/COPYRIGHT -->
<!-- START ALL JS/SCRIPT -->
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/jquery.ripples-min.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/scrollreveal.min.js"></script>
<script src="js/countdown.min.js"></script>
<script src="js/tilt.jquery.min.js"></script>
<script src="js/typewritter.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.parallax-1.1.3.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/megapack-main.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!--鼠标点击效果-->
<script src="./js/maodiao.js"></script>

<!-- 看板娘 -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

<script type="text/javascript">

    // 自定义文本数组
    let a_idx = 0;
    const texts = ["～(∠・ω< )⌒★", "ciallo", "小姐姐你好啊", "一天之际在于晨啊", "学妹请和我交往吧", "被爱的人不用道歉", "我在轻川的遗辞旁见过你", "枯枝开刃", "但亲爱的你是雨", "雾紫林深 万物寂静", "一只白蝴蝶偶然停在你的手背上", "皆惊鸿于你眼尾弯起的芊芊风月", "连同那纸柔宣"];

    let ac = new AudioContext();

    $(function () {
        $("body").click(function (e) {
            const $i = $("<span/>").text(texts[Math.floor(Math.random() * texts.length)]); // 随机选择文本
            const x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": color16(),
                "font-size": "50px"  // 设置文字大小
            });
            $("body").append($i);
            load_sound('voice.mp3');
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function () {
                    $i.remove();
                });
        });
    });

    function color16() {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
    }

    function load_sound(url_data) {
        const req = new XMLHttpRequest();
        req.open('GET', url_data, true);
        req.responseType = 'arraybuffer';
        req.onload = function () {
            ac.decodeAudioData(req.response, function (buffer) {
                const source = ac.createBufferSource();
                source.buffer = buffer;
                source.connect(ac.destination);
                source.start(0);
            }, function (e) {
                console.info('错误');
            });
        }
        req.send();
    }

    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            // $('[rel="icon"]').attr('href', "/funny.ico");
            document.title = '╭(°A°`)╮~为什么不看我';
            clearTimeout(titleTime);
        } else {
            $('[rel="icon"]').attr('href', "/favicon.ico");
            document.title = '(ฅ>ω<*ฅ)~' + OriginTitle;
            titleTime = setTimeout(function () {
                document.title = OriginTitle;
            }, 2000);
        }
    });

</script>

<script>
    function updateDuration() {
        // 网站成立的时间戳（毫秒）
        const establishedTimestamp = 1726012800000 ; // 例如：2023年10月1日的时间戳

        // 当前时间
        const currentTimestamp = Date.now();

        // 计算成立时长
        const durationInMilliseconds = currentTimestamp - establishedTimestamp;

        // 转换为天、小时、分钟、秒
        const durationInSeconds = Math.floor(durationInMilliseconds / 1000);
        const durationInDays = Math.floor(durationInSeconds / (3600 * 24));
        const durationInHours = Math.floor((durationInSeconds % (3600 * 24)) / 3600);
        const durationInMinutes = Math.floor((durationInSeconds % 3600) / 60);
        const remainingSeconds = durationInSeconds % 60;

        // 显示成立时间长度
        document.getElementById('establishmentDate').innerText = `本站已经成立了 ${durationInDays} 天 ${durationInHours} 小时 ${durationInMinutes} 分钟 ${remainingSeconds} 秒`;
    }

    updateDuration();

    // 每秒更新一次
    setInterval(updateDuration, 1000);
</script>

<!-- END ALL JS/SCRIPT -->

</body>

</html>